<html>
  <head></head>
  <style>
    p {
      height: 5000px;
    }
  </style>
  <body>
    <p>事件防抖节流</p>

    <script>
      // 滚动事件
      function showTop(...reset) {
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
        console.log('滚动条位置：' + scrollTop, reset)
      }

      // 防抖
      function debounce(fn, delay) {
        let timer = null
        return function () {
          if (timer) {
            clearTimeout(timer)
            timer = null
          }

          timer = setTimeout(fn, delay)
        }
      }

      // 节流
      function throttle(fn, delay) {
        let timer = null
        return function () {
          // 休息时间，暂不接客
          if (timer) return

          timer = setTimeout(() => {
            fn.apply({}, arguments)
            timer = null
          }, delay)
        }
      }

      // window.onscroll = debounce(showTop,1000)

      const fn = throttle(showTop, 500)
      window.onscroll = () => {
        fn(1, 2, 3)
      }
    </script>
  </body>
</html>
